<template>
    <div class="home">

        <van-swipe style="height: 200px;" vertical :autoplay="3000">
            <van-swipe-item><img src="@/common/img/home/swipe1.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/common/img/home/swipe2.jpeg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/common/img/home/swipe3.jpeg" alt=""></van-swipe-item>
            <van-swipe-item><img src="@/common/img/home/swipe4.jpeg" alt=""></van-swipe-item>
        </van-swipe>
        <nav class="circle-nav">
            <van-circle v-model:current-rate="timeFinish" :rate="timeTarget" :stroke-width="100" text="时间进度"
                layer-color="#faeff6ad" :color="gradientColor" />
            <van-circle v-model:current-rate="plan" :rate="planTarget" :stroke-width="100"
                :text="pointList.length != 0 ? '旅行进度' : '无旅行计划'" layer-color="#faeff6ad" :color="gradientColor" />
        </nav>

        <nav class="middle" v-show="pointList.length != 0">
            <van-swipe-cell v-for="(item, index) in pointList" :key="item.val.uid">
                <van-cell :title="index + 1 + ': ' + item.val.title"
                    :value="item.val.province ? item.val.province + '-' + item.val.city : ''" :label="item.val.address"
                    center :border="false" />
                <template #right>
                    <div class="btn-nav">
                        <van-button round :text="item.isFinish ? '取消' : '完成'" style="background-color: #6fa42eac;"
                            @click="finishPlan(item)" />
                        <van-button round text=" 删除" style="background-color: #f68686be;" @click="deletePlan(item)" />
                    </div>

                </template>
            </van-swipe-cell>

        </nav>
        <p class="addPoint" @click="toaa(2)" v-show="pointList.length == 0">点击前往地图添加地点 </p>


    </div>
</template>
<script  lang="ts">
export default {
    name: 'HomeView',
}
</script>
<script setup lang="ts">
import { computed, inject, ref, watch } from 'vue';
import { usePointStore } from '@/stores/modules/pointStore';
import { storeToRefs } from 'pinia';
const pointStore = usePointStore();
const timeTarget = ref(0);

const planTarget = ref(0);
const timeFinish = ref(0);
const planFinish = ref(0);
const today = new Date();
const gradientColor = {
    '0%': '#c4e9ff',
    '100%': '#f7ccea',
};
const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
timeTarget.value = (new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)).getTime() - startTime.getTime();
const toaa = inject("toPage");

//时间计时器
setInterval(() => {
    timeFinish.value = (new Date()).getTime() - startTime.getTime();
    timeFinish.value = timeFinish.value / timeTarget.value * 100;
}, 500);
//监听pinia变化
const { pointList } = storeToRefs(pointStore);
pointStore.$subscribe((age, state) => {

    planTarget.value = state.pointList.length;
    console.log(planTarget.value, planFinish.value)
}, { detached: true })
//完成事件数量
const plan = computed(() => planFinish.value / planTarget.value * 100)
//点击完成按钮
const finishPlan = (item: any) => {
    if (item.isFinish == false) {
        planFinish.value++;
        item.isFinish = true;
    }
    else {
        planFinish.value--;
        item.isFinish = false;
    }


}
const map: any = inject('map');
const markerList: any = inject('markerList');
//删除marker
const deletePlan = (item: any) => {
    console.log("map", map);
    if (item.isFinish)
        planFinish.value--;
    //从pinia删除
    pointStore.pointList = pointStore.pointList.filter((it: any) => {
        return it.val.uid != item.val.uid;
    })
    //从地图删除
    markerList.value = markerList.value.filter((it: any) => {
        // console.log(it.getTitle(), ':', item.val.title)
        if (it.getTitle() == item.val.title) {
            map.value.removeOverlay(it);
            return false;
        }
        return true;
    })

}
</script>
<style lang="scss" scoped>
.van-swipe-cell {
    margin: 2vh 0;
}

.van-cell {
    background-image: linear-gradient(to right, #fab7dc8e, #0b8a004d);
    font-weight: 900;
    color: rgb(112, 112, 112);
    --van-cell-value-color: rgb(117, 83, 104);
    --van-cell-label-color: rgb(112, 112, 112);
    // background-position: ;
}
</style>